<template>
  <div class="activities-page">
    <div class="page-header">
      <h2 class="page-title">活动管理</h2>
      <button class="add-btn">
        <svg viewBox="0 0 24 24">
          <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
        </svg>
        创建活动
      </button>
    </div>

    <!-- 活动状态统计 -->
    <div class="stats-overview">
      <div class="stat-card">
        <div class="stat-icon upcoming">
          <svg viewBox="0 0 24 24">
            <path d="M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">12</h3>
          <p class="stat-label">即将开始</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon ongoing">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">5</h3>
          <p class="stat-label">进行中</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon completed">
          <svg viewBox="0 0 24 24">
            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">68</h3>
          <p class="stat-label">已完成</p>
        </div>
      </div>
    </div>

    <!-- 活动列表 -->
    <div class="activities-grid">
      <div class="activity-card" v-for="n in 8" :key="n">
        <div class="activity-image">
          <img src="https://via.placeholder.com/300x200" alt="活动封面">
          <div class="activity-status" :class="getStatusClass(n)">
            {{ getStatusText(n) }}
          </div>
        </div>
        <div class="activity-content">
          <h3 class="activity-title">狂欢夜 - 电音盛宴{{ n }}</h3>
          <div class="activity-info">
            <div class="info-item">
              <svg viewBox="0 0 24 24" class="info-icon">
                <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
              </svg>
              <span>2024-12-{{ 20 + n }} 21:00</span>
            </div>
            <div class="info-item">
              <svg viewBox="0 0 24 24" class="info-icon">
                <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"/>
              </svg>
              <span>门店{{ (n % 3) + 1 }}</span>
            </div>
            <div class="info-item">
              <svg viewBox="0 0 24 24" class="info-icon">
                <path d="M16,4C18.11,4 19.61,5.29 20.19,7H22V9H20.19C19.61,10.71 18.11,12 16,12C13.89,12 12.39,10.71 11.81,9H2V7H11.81C12.39,5.29 13.89,4 16,4M16,6A2,2 0 0,0 14,8A2,2 0 0,0 16,10A2,2 0 0,0 18,8A2,2 0 0,0 16,6Z"/>
              </svg>
              <span>DJ Max{{ n }}</span>
            </div>
          </div>
          <div class="activity-stats">
            <div class="stat-item">
              <span class="stat-number">{{ n * 25 + 120 }}</span>
              <span class="stat-label">报名人数</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">500</span>
              <span class="stat-label">限制人数</span>
            </div>
          </div>
        </div>
        <div class="activity-actions">
          <button class="action-btn edit">编辑</button>
          <button class="action-btn view">查看</button>
          <button class="action-btn participants">参与者</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const getStatusClass = (n) => {
  const statuses = ['upcoming', 'ongoing', 'completed']
  return statuses[n % 3]
}

const getStatusText = (n) => {
  const statuses = ['即将开始', '进行中', '已完成']
  return statuses[n % 3]
}
</script>

<style scoped>
.activities-page {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
  color: #2d3748;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #5856d6, #228B22);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(88, 86, 214, 0.4);
}

.add-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* 统计概览 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 28px;
  height: 28px;
  fill: white;
}

.stat-icon.upcoming {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}

.stat-icon.ongoing {
  background: linear-gradient(135deg, #5856d6, #7c3aed);
}

.stat-icon.completed {
  background: linear-gradient(135deg, #228B22, #16a34a);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: #2d3748;
}

.stat-label {
  font-size: 0.9rem;
  color: #718096;
  margin: 0;
}

/* 活动网格 */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
}

.activity-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.activity-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-status {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
}

.activity-status.upcoming {
  background: rgba(245, 158, 11, 0.9);
}

.activity-status.ongoing {
  background: rgba(88, 86, 214, 0.9);
}

.activity-status.completed {
  background: rgba(34, 139, 34, 0.9);
}

.activity-content {
  padding: 20px;
}

.activity-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #2d3748;
}

.activity-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #718096;
  font-size: 0.9rem;
}

.info-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.activity-stats {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-top: 1px solid #f1f5f9;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-item .stat-number {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
}

.stat-item .stat-label {
  font-size: 0.8rem;
  color: #718096;
}

.activity-actions {
  padding: 15px 20px;
  background: #f8fafc;
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: #f7fafc;
}

.action-btn.edit:hover {
  border-color: #5856d6;
  color: #5856d6;
}

.action-btn.view:hover {
  border-color: #228B22;
  color: #228B22;
}

.action-btn.participants:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}
</style> 